/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="pipeline-detail__wrap">
        <page-title
            :return-btn="true"
            :return-title="_('返回AI Flow列表')"
            :title-name="interactFlowName"
            @return="_returnInteractFlow">
            <div class="project-info">
                <sf-button-primary
                    class="btn-blank creat-button white m-r20"
                    @click="_addInteractTask">
                    <lang>生成训练任务</lang>
                </sf-button-primary>
            </div>
        </page-title>
        <iframe
            id="iframe"
            ref="visualToolIframeRef"
            :src="iframeUrl"
            class="visual__iframe"
            @load="hideDom">
        </iframe>
    </div>
</template>
<script>
import store from 'src/vuex/store';
let userID = store.state.userId;
import trainingUrlAdapter from 'src/home/mod_common/training_url_adapter';
import { deepClone } from 'src/util/deep_clone';
import pageTitle from 'src/home/mod_cluster/common/page_title/page_title';
import AddInteractTask from 'src/home/mod_cluster/project_manager/components/label_form/add_interact_task.vue';
import { getStorage,setStorage } from 'src/util/local_storage';
export default {
    name: 'PipelineDetail',
    components: {
        pageTitle
    },
    computed: {
        pipelineID () {
             return this.$route.query.pipeline_id || '';
        },
        interactFlowName () {
             return this.$route.query.interactFlowName || '';
        },
        iframeUrl () {
            let pipelineInfo = JSON.parse(getStorage('pipelineInfo'));
            let detailURL = `${pipelineInfo.detailUrl}`;
            return detailURL;
        }
    },
    mounted () {
          /* eslint-disable */
        setTimeout(()=>{
            this.hideDom();
        },500)
        let jsons =  this.$ajax.get('http://10.64.1.24:30000/dex/captcha',{id:'ouMlCWK4Wxj9vgKKcYpL'});
        window.console.log(jsons);
    },
    methods:{

        // 新增任务弹窗
        _createInteractTaskFormWin () {
            if (!this.interactTaskFormWin) {
                this.interactTaskFormWin = this.$modal(AddInteractTask, {
                    autoDestory: true
                });
            }
            return this.interactTaskFormWin;
        },

        //新增任务
        _addInteractTask () {
            let formWin = this._createInteractTaskFormWin();
            let pipelineInfo = JSON.parse(getStorage('pipelineInfo'));
            formWin.open({
                reset: true,
                title: _('生成训练任务'),
                data:{
                    paramList:pipelineInfo.parameters,
                    flowId:pipelineInfo.aiFlowId,
                    showAIFlowList:false,
                    type:0,
                    typeList:[{
                        type:0,
                        name:_('单次训练')
                    },{
                        type:1,
                        name:_('周期间隔')
                    }, {
                        type:2,
                        name:_('Cron')
                    }],
                },
                buttons: [{
                    cls: 'sfv-btn-primary',
                    actionName: 'submit',
                    loading: true,
                    text:  _('确定')
                }, {
                    cls: 'sfv-btn-primary',
                    actionName: 'copy',
                    text:_('修改当前参数继续新增')
                }, {
                    actionName: 'cancel',
                    text: '取消'
                }],
                copy: () => {
                    let ajaxParams = formWin.formRoot.getJsonValue();
                    this.ajaxSubmitInteractTask(ajaxParams, formWin, 'copy');
                },
                submit: () => {
                    let ajaxParams = formWin.formRoot.getJsonValue();
                    this.ajaxSubmitInteractTask(ajaxParams, formWin);
                }
            });
        },
     
        async ajaxSubmitInteractTask (params, formWin, type = 'add') {
            formWin.$mask();
            const ADD_INTERACT_TASK_URL = trainingUrlAdapter(`user/${userID}/interactiveTask`);
            let jsonData = await this.$ajax.post(ADD_INTERACT_TASK_URL, params);
            formWin.$unmask();
            let { success, msg } = jsonData;
            if (!success) {
                return this.$showErr(msg || _('保存失败'));
            }
            let query = deepClone(this.$route.query);
            //如果是新增，则跳到任务管理页面
            if (type === 'add') {
                if(params.type===0){
                    // 跳到单次训练
                    setStorage('interactType', 0);
                }else{
                    setStorage('interactType', 1);
                }
                formWin.hide();
                this.$router.push({
                    path: `/project_manager/project_index/interact_task_manager`,
                    query: Object.assign(query)
                });
            } 
            this.$ok(_('生成训练任务成功'));
            //如果是克隆，则继续新增，弹窗不消失
        },

        _returnInteractFlow () {
            let query = deepClone(this.$route.query);
            delete query.pipeline_id;
            delete query.interactFlowName;
            this.$router.push({
                path: `/project_manager/project_index/interact_ai_flow`,
                query: Object.assign(query)
            });
        },
        hideDom () {
            let _iframe = document.getElementById('iframe');
            let topLevelDom = _iframe.contentWindow.document.getElementsByClassName('topLevelToolbar_fbk8awx');   //get iframe下的id
            for (let i = 0; i < topLevelDom.length; i++) {
                topLevelDom[i].style.display = 'none';
            }
        }
    }
};
</script>
<style lang="less">
.pipeline-detail__wrap {
    height: 100%;
    .visual__iframe {
        width: 100%;
        height: calc(100% - 48px);
        border: none;
        border-radius: 4px;
    }
    .pipeline-detail__top {
        height: 48px;
        border-bottom: 1px solid #ddd;
        margin: 0 12px;
        display: flex;
        align-items: center;
    }
}
</style>
